<template>
  <div class="flex justify-center bg-[#fafeff] items-center h-screen">
    <div class="flex flex-col items-center">
      <div class="text-[30px] mb-lg font-bold">后台系统</div>
      <div
        class="w-[320px] h-[350px] p-[20px] box-border bg-white rounded-md"
        style="border: 1px solid #e8f1ff"
      >
        <div>
          <el-tabs>
            <el-tab-pane label="登录">
              <template #default>
                <el-form
                  ref="ruleFormRef"
                  :model="ruleForm"
                  status-icon
                  :rules="rules"
                  label-width="70px"
                  class="w-full"
                  label-position="left"
                >
                  <el-form-item label="用户名" prop="name" class="label-hidden">
                    <el-input
                      placeholder="请输入用户名"
                      v-model="ruleForm.name"
                      autocomplete="off"
                    />
                  </el-form-item>
                  <el-form-item
                    label="密码"
                    prop="password"
                    class="label-hidden"
                  >
                    <el-input
                      placeholder="密码"
                      v-model="ruleForm.password"
                      type="password"
                      autocomplete="off"
                    />
                  </el-form-item>
                  <!-- <el-form-item label="验证码" prop="password" class="label-hidden">
                  <el-input
                    placeholder="密码"
                    v-model="ruleForm.password"
                    type="password"
                    autocomplete="off"
                  />
                </el-form-item> -->
                </el-form>
                <div class="w-full">
                  <el-button @click="login" class="w-full" type="primary" plain
                    >登录</el-button
                  >
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane label="注册">
              <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="70px"
                class="w-full"
                label-position="left"
              >
                <el-form-item label="用户名" prop="name" class="label-hidden">
                  <el-input
                    placeholder="请输入用户名"
                    v-model="registeObj.name"
                  />
                </el-form-item>
                <el-form-item label="密码" prop="password" class="label-hidden">
                  <el-input
                    placeholder="密码"
                    v-model="registeObj.password"
                    type="password"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-form>
              <div class="w-full">
                <el-button
                  @click="register()"
                  class="w-full"
                  type="primary"
                  plain
                  >注册</el-button
                >
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="mt-[20px]">
            <el-checkbox v-model="remeber" label="记住账号" size="large" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UserLogin, UserRegieter } from "@/api/user";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
const router = useRouter();
const ruleForm = ref({
  name: "admin",
  password: "123456",
});
const registeObj = ref({
  name: "",
  password: "",
});
const remeber = ref(false);
const rules = ref();
const register = async () => {
  try {
    let res = await UserRegieter({
      password: registeObj.value.password,
      username: registeObj.value.name,
    });
    if (res.data.code == 200) {
      Message.success("注册成功");
    } else {
      Message.error(res?.data.msg || "注册失败");
    }
  } catch (error) {
    console.error(error);
  }
};
const login = async () => {
  try {
    let res = await UserLogin({
      username: ruleForm.value.name,
      password: ruleForm.value.password,
    });
    if (res.code == 200) {
      Message.success("登录成功");
      localStorage.setItem("token", res.data.token);
      router.push({
        path: "/index",
      });
    } else {
      Message.error(res.msg || "操作失败");
    }
  } catch (error) {
    console.error(error);
  }
};
</script>

<style lang="less">
.el-tabs__nav-wrap::after {
  background-color: #fff;
}

.el-tabs__header {
  margin: 0 0 45px;
}

.label-hidden .el-form-item__label {
  display: none;
}

.el-tabs__nav {
  transform: translateX(95px) !important;
}
</style>
